<!DOCTYPE html>
<html lang="en">
<head>
  <title>Object Required Properties</title>
  <meta charset="utf-8"/>
  <script src="../../dist/jsoneditor.js"></script>
  <link rel='stylesheet' id='theme_stylesheet'>

</head>
<body>

<div class="container">
  <h1>Test</h1>
  <div class="row">
    <div class="col-md-8">
      <div class='json-editor-container'></div>
    </div>
    <div class="col-md-4">
      <div>
        <label for="theme_switcher">CSS Framework</label>
        <select id='theme_switcher' class='form-control browser-default'>
          <option value='barebones'>Barebones</option>
          <option value='html'>HTML</option>
          <option value='jqueryui'>jQuery UI</option>
          <option value='bootstrap2'>Bootstrap 2</option>
          <option value='bootstrap3'>Bootstrap 3</option>
          <option value='bootstrap4'>Bootstrap 4</option>
          <option value='foundation3'>Foundation 3</option>
          <option value='foundation4'>Foundation 4</option>
          <option value='foundation5'>Foundation 5</option>
          <option value='foundation6'>Foundation 6</option>
          <option value='materialize'>Materialize</option>
        </select>
      </div>
      <label for="value">value</label>
      <textarea id="value" class="value" style="width: 100%; height: 600px;"></textarea>
      <button class='get-value'>get value</button>
      <button class='set-value'>set value</button>
      <button class='set-empty-value'>set empty value</button>
      <button class='get-formatted-value'>get formatted value</button>
    </div>
  </div>
</div>

<script>
  var container = document.querySelector('.json-editor-container');
  var value = document.querySelector('.value');
  var getValue = document.querySelector('.get-value');
  var setValue = document.querySelector('.set-value');
  var setEmptyValue = document.querySelector('.set-empty-value');
  var getFormattedValue = document.querySelector('.get-formatted-value');

  var schema = {
    "title": "Data Types",
    "type": "object",
    "format": "grid-strict",
    "required": [
      "number",
      "boolean",
    ],
    "properties": {
      "string": {
        "title": "string",
        "type": "string",
        "minLength": 5,
        "options": {
          "grid_columns": 3
        }
      },
      "number": {
        "title": "number",
        "type": "number",
        "options": {
          "grid_columns": 3
        }
      },
      "boolean": {
        "title": "boolean",
        "type": "boolean",
        "options": {
          "grid_columns": 3,
        }
      },
      "radio": {
        "type": "string",
        "format": "radio",
        "title": "Radio Buttons",
        "enum": [
          "Home",
          "Work"
        ],
        "options": {
          "grid_columns": 3
        }
      },
      "array": {
        "title": "array",
        "type": "array",
        "options": {
          "grid_columns": 6
        },
        "items": {
          "title": "string",
          "type": "string"
        }
      },
      "object": {
        "type": "object",
        "format": "grid-strict",
        "required": [
          "array",
          "string",
        ],
        "options": {
          "grid_columns": 6
        },
        "properties": {
          "string": {
            "title": "string",
            "type": "string",
            "options": {
              "grid_columns": 3
            }
          },
          "number": {
            "title": "number",
            "type": "number",
            "options": {
              "grid_columns": 3
            }
          },
          "boolean": {
            "title": "boolean",
            "type": "boolean",
            "options": {
              "grid_columns": 3
            }
          },
          "radio": {
            "type": "string",
            "format": "radio",
            "title": "Radio Buttons",
            "enum": [
              "Home",
              "Work"
            ],
            "options": {
              "grid_columns": 3
            }
          },
          "array": {
            "title": "array",
            "type": "array",
            "options": {
              "grid_columns": 12
            },
            "items": {
              "title": "string",
              "type": "string"
            }
          }
        }
      }
    }
  };

  var setTheme = async function(theme) {
    theme = theme || '';

    var mapping = {
      barebones: '',
      html: '',
      bootstrap2: 'https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css',
      bootstrap3: 'https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
      bootstrap4: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
      foundation3: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/3.2.5/stylesheets/foundation.css',
      foundation4: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/4.3.2/css/foundation.min.css',
      foundation5: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css',
      foundation6: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.css',
      jqueryui: 'https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css',
      materialize: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css'
    };

    if(typeof mapping[theme] === 'undefined') {
      theme = 'bootstrap3';
      document.getElementById('theme_switcher').value = theme;
    }

    var scriptMapping = {
      materialize: [
        'https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js'
      ]
    }

    var themeScripts = scriptMapping[theme],
      head = document.getElementsByTagName('head')[0],
      script;

    if (typeof themeScripts == 'string') { themeScripts = [themeScripts]; }
    if (Array.isArray(themeScripts)) {
      for (var i = 0; i < themeScripts.length; i++) {
        script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = themeScripts[i];
        head.appendChild(script);
      }
    }

    JSONEditor.defaults.options.theme = theme;

    document.getElementById('theme_stylesheet').href = mapping[theme];
    document.getElementById('theme_switcher').value = JSONEditor.defaults.options.theme;

    console.log(editor)
    if (editor) {
      editor.destroy();
    }

    await initJsonEditor();

  };

  initJsonEditor = async function () {
    editor = new JSONEditor(container, {
      schema: schema,
      theme: 'bootstrap4',
      show_opt_in: true
    });
    await editor.promise;
  }

  document.getElementById('theme_switcher').addEventListener('change',function() {
    setTheme(this.value);
  });

  window.addEventListener('load', async function() {
    await initJsonEditor();

    getValue.addEventListener('click', function () {
      value.value = JSON.stringify(editor.getValue());
    });

    setValue.addEventListener('click', function () {
      editor.setValue({"string":"test","number":0,"boolean":false,"array":["test"],"object":{"string":"","number":10,"boolean":true,"array":[]}})
    });

    setEmptyValue.addEventListener('click', function () {
      editor.setValue({})
    });

    getFormattedValue.addEventListener('click', function () {
      value.value = JSON.stringify(editor.getValue(), null, 2);
    });

    setTheme(this.value);
  });
</script>

</body>
</html>
